<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue-router</title>
	<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script> 
</head>
<body>
<div id="app4">
    <h1>vue-router 编程式导航 </h1>
    <p>{{ message}}</p> 
    <p><span style='color:red;'>使用方法函数来触发路由链接 而不是 router-link</span> </p>
     <button v-on:click='link'>点击试试</button>
     <button v-on:click='link2'>点击看看</button>
      <button v-on:click='returnLink'>后退一步</button>
      <button v-on:click='goLink'>前进一步</button>
     <router-view></router-view>
</div>
</body>
<script>
var luyou4 = new VueRouter({
	routes : [
	        {
	          path: "/home",
	         component : {
	        	 template : "<p>我是点击试试所连接的内容</p>"
	         }
	        },
	        {
		          path: "/home2",
		         component : {
		        	 template : "<p>我是点击看看所连接的内容</p>"
		         }
		        }
	 ]
	
});


new Vue({
	el : "#app4",
	router : luyou4,
	data : {
		message : "vue-router 编程式导航"
	},
	methods : {
		link : function(){
			luyou4.push("home"); //编程式导航 相当于代替了传统的声明式 router-link
			//luyou4.replace(location)  跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录
		},
		link2 : function(){
			luyou4.push("home2"); //编程式导航 相当于代替了传统的声明式 router-link
		},
		returnLink : function(){
			luyou4.go(-1); // 后退一步记录，等同于 history.back()
		},
		goLink : function(){
			luyou4.go(1); // 后退一步记录，等同于 history.forward()
		}
	}
});

</script>
</html>